<template>
    <div>
        <h2>上传视频</h2>
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="视频名称">
                <el-input placeholder="请输入视频名称" v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="视频介绍">
                <el-input type="textarea"
                          :autosize="{ minRows: 2, maxRows: 4}"
                          placeholder="请输入视频介绍" v-model="form.info"></el-input>
            </el-form-item>
            <el-form-item label="视频封面">
                <div class="cover">
                    <i v-if="form.img===''" class="el-icon-plus"></i>
                    <img v-else :src="form.img" alt="">
                    <input id="img" type="file" @change="imgSel" accept="image/jpeg" class="file">
                </div>
            </el-form-item>
            <el-form-item label="视频文件">
                <div class="btn">选择视频文件<input id="video" accept="video/mp4" @change="videoSel" type="file" class="file">
                </div>
                <br>
                <video v-if="form.video!==''" controls :src="form.video" height="300px" class="video"
                       width="400px"></video>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitVideo">上传</el-button>
            </el-form-item>

        </el-form>
    </div>
</template>

<script>
    import api from '@/api'
    import {Loading} from 'element-ui'

    export default {
        name: "newVideo",
        beforeRouteEnter(to, from, next) {
            if (sessionStorage.role !== 'admin') {
                next('/index')
            } else {
                next()
            }
        },
        data() {
            return {
                form: {
                    name: '',
                    info: '',
                    img: '',
                    video: '',

                }
            }
        },
        methods: {
            imgSel(e) {
                const el = e.target
                this.form.img = URL.createObjectURL(el.files[0])
            }
            ,
            videoSel(e) {
                const el = e.target
                this.form.video = URL.createObjectURL(el.files[0])
            },
            submitVideo() {
                if (this.form.name === "") {
                    this.$message({message: '没有视频名称', type: 'warning'})
                    return
                }
                if (this.form.info === "") {
                    this.$message({message: '没有视频介绍', type: 'warning'})
                    return
                }
                const img = document.getElementById('img').files[0]
                if (!img) {
                    this.$message({message: '没有封面图片', type: 'warning'})
                    return
                }
                if (img.type !== 'image/jpeg') {
                    this.$message({message: '封面图片类型有误,请使用jpeg图片', type: 'warning'})
                    return
                }
                const video = document.getElementById('video').files[0]
                if (!video) {
                    this.$message({message: '没有选择视频文件', type: 'warning'})
                    return
                }
                if (video.type !== 'video/mp4') {
                    this.$message({message: '视频文件类型有误,请使用MP4视频', type: 'warning'})
                    return
                }
                const data = new FormData();
                data.append('video', document.getElementById('video').files[0])
                data.append('cover', document.getElementById('img').files[0])
                data.append('info', this.form.info)
                data.append('name', this.form.name)
                const loading = Loading.service({text: '视频上传中'});
                api.uploadVideo(data).then(({data: resp}) => {
                    loading.close();
                    if (resp.code === 200) {
                        this.$message({message: '上传成功', type: 'success'})
                        this.$router.push('/index');
                    } else {
                        this.$message({message: resp.message, type: 'warning'})
                    }
                }).catch(() => {
                    this.$message({message: '网络好像有点问题', type: 'error'})
                })
            }
        }
    }
</script>

<style scoped>
    .cover {
        overflow: hidden;
        display: inline-block;
        width: 200px;
        height: 150px;
        border-radius: 10px;
        border: dashed 3px #16d1ff;
        color: #1a83ff;
        font-size: 100px;
        font-weight: 900;
        line-height: 150px;
        text-align: center;
        position: relative;

    }

    .file {
        left: 0;
        top: 0;
        opacity: 0;
        position: absolute;
        width: 100%;
        height: 100%;
    }

    .video {
        background: black;
    }

    .btn {
        color: #fff;
        background-color: #409eff;
        border-color: #409eff;
        display: inline-block;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        -webkit-appearance: none;
        text-align: center;
        box-sizing: border-box;
        outline: none;
        margin: 0;
        transition: .1s;
        font-weight: 500;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        padding: 12px 20px;
        font-size: 14px;
        border-radius: 4px;
        display: inline-block;
        position: relative;
    }

</style>